<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变选中项的颜色</title>
	</head>
	<body >
		<style type="text/css">
			#a.hover {background-color:red ;}
		</style>
		<script src="../js/jquery-1.8.2.min.js"></script>
<script language="javascript">
   function bgChange(obj) {
 document.getElementById("abc").bgColor=obj.options[obj.selectedIndex].value;
   
    };
     $(function($){
        $("#abc option").each(function(){
            $(this).hover(
            function(){
                this.backgroundColor="red";
            },
            function(){
                return;
            }
            );
        });
       });
</script>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
 <select onchange="bgChange(this);" id="abc" ;return false;>
    <option  class="a" value="#FF99FF" style="background:#FF99FF">pink</option>
    <option class="a" value="#FFFF00" style="background:#FFFF00">yellow</option>
    <option class="a" value="#33FF00" style="background:#33FF00">green</option>
    <option class="a" value="#0033FF" style="background:#0033FF">blue</option>
    <option class="a" value="#CCCCCC" style="background:#CCCCCC">gray</option>
  </select>
</body>
</html>


